<!-- @module travel-form -->
<!-- @author: YunTao.Li -->
<!-- @description:  二级弹出,考勤申诉选择弹出,弹出异常的考勤列表供选择-->
<!-- @since: 2019-11-19 12:47:36 -->
<template>
  <el-dialog title="异常考勤列表" :visible.sync="dialogFormVisible" width="50%" top="5vh" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <!-- table begin-->
    <div class="div-table">
      <fieldset class="fieldset" style="margin-top:15px;">
        <legend class="legend-font" v-text="text_grid" />
        <el-table ref="attenceExceptionTable" :data="attenceExceptionData" border fit highlight-current-row style="width: 100%" max-height="250" size="mini" @selection-change="onSelectChange">
          <el-table-column type="selection" width="40px" label="序号" />
          <el-table-column align="center" type="index" width="55px" label="序号" />
          <!--考勤日期-->
          <el-table-column align="center" label="考勤日期">
            <template slot-scope="scope">
              <span>{{ scope.row.attendDate | parseTime('{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <!--时段 1-上午，2-下午，3-全天'-->
          <el-table-column prop="timeType" :formatter="dictFormatter" label-class-name="timeType" align="center" label="时段" width="80px">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.timeType }}</span>
            </template> -->
          </el-table-column>
          <!--实际打卡时间-->
          <el-table-column width="100px" align="center" label="实际打卡时间">
            <template slot-scope="scope">
              <span>{{ scope.row.signDate }}</span>
            </template>
          </el-table-column>
          <!--考勤状态 SIGN_STATUS 0:正常  1:异常  2:漏签-->
          <el-table-column prop="signStatus" :formatter="dictFormatter" label-class-name="signStatus" align="center" label="考勤状态" width="100px">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.signStatus }}</span>
            </template> -->
          </el-table-column>
          <!--申诉原因(隐藏)-->
          <!-- <el-table-column align="center" label="申诉原因(隐藏)" width="100px" hidden>
            <template slot-scope="scope">
              <span>{{ scope.row.explainDesc }}</span>
            </template>
          </el-table-column> -->
        </el-table>
      </fieldset>
    </div>
    <!-- table end -->
    <pagination v-show="total>0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.limit" @pagination="getList" />

    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button size="mini" @click="onCancel">取 消</el-button>
      <el-button type="primary" size="mini" @click="onSubmit">选择</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { attendanceExceptionInfoList } from '@/api/attendance/info-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      dialogFormVisible: false,
      labelPosition: 'right',
      text_grid: '选择需申诉的考勤记录',
      attenceExceptionData: [],
      AttendanceAppealDetail: null,
      formLabelWidth: '120px',
      total: 0,
      queryForm: {
        page: 1,
        limit: 10,
        yrmonth: '',
        empCode: ''
      }
    }
  },
  created() {
    // 初始化查询展示
  },
  methods: {
    getList() {
      return attendanceExceptionInfoList(this.queryForm).then(response => {
        this.attenceExceptionData = response.data.records
        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      }).then(function() {
        console.log('22')
      })
    },
    toggele(data) { // 显示此窗口或隐藏
      // 查询前指定yrmonth查询条件
      if (data) {
        this.queryForm.yrmonth = data.periodCode
        this.queryForm.empCode = data.empCode
      }

      if (this.dialogFormVisible) {
        this.dialogFormVisible = false
      } else {
        this.dialogFormVisible = true
        const exceptionDatas = this.attenceExceptionData
        const _this = this || _this
        this.getList().then(function() {
          // 查询后处理选中行
          if (data && exceptionDatas) {
            const choosedDatas = data.attendanceAppealDetailList

            for (let i = 0; i < exceptionDatas.length; i++) {
              const oneExceptionData = exceptionDatas[i]

              for (let k = 0; k < choosedDatas.length; k++) {
                const choosedData = choosedDatas[k]

                if (oneExceptionData === choosedData) {
                  console.log(oneExceptionData.attendDate + '-' + oneExceptionData.timeType)
                  console.log(choosedData.attendDate + '-' + choosedData.timeType)
                  console.log(oneExceptionData === choosedData)
                  _this.$refs.attenceExceptionTable.toggleRowSelection(exceptionDatas[i], true)
                }
              }
            }
          }
          // 查询后处理选中行 end
        })
      }
    },
    onSelectChange(selection) {
      this.AttendanceAppealDetail = selection
    },
    onCancel() { // 取消
      this.toggele()
      this.AttendanceAppealDetail = null
    },
    onSubmit() { // 保存
      this.dialogFormVisible = false
      this.$emit('submitFunc', this.AttendanceAppealDetail)
    }
  }
}
</script>

<style>
</style>
